<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>ErlyComet dojo demo</title>
	<link rel="stylesheet" href="/styles.css" type="text/css" media="screen">
	
	<script type="text/javascript"
		djConfig="isDebug: true"
		src="http://o.aolcdn.com/dojo/1.0.0/dojo/dojo.xd.js"></script>
	
	<!-- for development and debugging comment the script above and uncomment the script below -->
	<!-- (and you must put a local copy of dojo and dojox in demo-docroot)                     -->  
	
    <!--
	<script type="text/javascript"
		djConfig="isDebug: true"
		src="dojo/dojo.js"></script>
	-->	
			
	<script type="text/javascript">	
        dojo.require("dojox.cometd");

		var counter = {
			start_stop: function(){
				if (dojo.byId("counter_button").innerHTML == "subscribe"){
			      dojox.cometd.subscribe("/test/time", this, "update"); 
			      dojo.byId("counter_button").innerHTML = "unsubscribe";
			    } else {
			      dojox.cometd.unsubscribe("/test/time"); 
			      dojo.byId("counter_output").innerHTML = "";
			      dojo.byId("counter_button").innerHTML = "subscribe";				   
			    }
			},
			update: function(msg){
				dojo.byId("counter_output").innerHTML = msg.data;
			}	
		}
		
		var rpc = {
			_id:0,
			invoke: function(){
				var text = dojo.byId('rpc_text').value;
				var delay = dojo.byId('rpc_delay').value;
				dojox.cometd.startBatch();
			    dojox.cometd.subscribe("/rpc/test", this, "result"); 	
			    dojox.cometd.publish("/rpc/test", { id:rpc._id, method:"delayed_echo", params:[text, delay]});				
			    dojox.cometd.endBatch();
			    rpc._id = rpc._id + 1;		   
			},
			result: function(msg){
				dojo.byId("rpc_output").innerHTML = msg.data.result;
				dojox.cometd.unsubscribe("/rpc/test"); 
			}	
		}		
		
		var room = {
		    _last: "",
		    _username: null,

		    join: function(name){

		        if(name == null || name.length==0 ){
		            alert('Please enter a username!');
		        }else{

		            this._username=name;
		            dojo.byId('join').className='hidden';
		            dojo.byId('joined').className='';
		            dojo.byId('phrase').focus();

		            // subscribe and join
			        dojox.cometd.startBatch();
		            dojox.cometd.subscribe("/chat/demo", room, "_chat");
		            dojox.cometd.publish("/chat/demo", { user: room._username, join: true, chat : room._username+" has joined"});
			        dojox.cometd.endBatch();

		            // handle cometd failures while in the room
		            room._meta=dojo.subscribe("/cometd/meta",function(event){
		                console.debug(event);   
		                if (event.action=="handshake") {
			                room._chat({data:{join:true,user:"SERVER",chat:"reconnected"}});
		                    dojox.cometd.subscribe("/chat/demo", room, "_chat");
		                } else if (event.action=="connect" && !event.successful) {
		                    room._chat({data:{leave:true,user:"SERVER",chat:"disconnected!"}});
			        }
		            });
		        }
		    },

		    leave: function(){
		        if (room._username==null) {
		            return;
				}

				if (room._meta) {
		    		dojo.unsubscribe(room._meta);
				}
				room._meta=null;

				dojox.cometd.startBatch();
		    	dojox.cometd.unsubscribe("/chat/demo", room, "_chat");
		    	dojox.cometd.publish("/chat/demo", { user: room._username, leave: true, chat : room._username+" has left"});
				dojox.cometd.endBatch();

		        // switch the input form
		        dojo.byId('join').className='';
		        dojo.byId('joined').className='hidden';
		        dojo.byId('username').focus();
		        room._username=null;
		    },

		    chat: function(text){
		        if(!text || !text.length){ return false; }
		        dojox.cometd.publish("/chat/demo", { user: room._username, chat: text});
		    },

		    _chat: function(message){
		        var chat=dojo.byId('chat');
		        if(!message.data){
		            alert("bad message format "+message);
		            return;
		        }
				
		        var from=message.data.user;
		        var special=message.data.join || message.data.leave;
		        var text=message.data.chat;
		        if(!text){ return; }

		        if( !special && from == room._last ){
		            from="...";
		        }else{
		            room._last=from;
		            from+=":";
		        }

		        if(special){
		            chat.innerHTML += "<span class=\"alert\"><span class=\"from\">"+from+"&nbsp;</span><span class=\"text\">"+text+"</span></span><br/>";
		            room._last="";
		        }else{
		            chat.innerHTML += "<span class=\"from\">"+from+"&nbsp;</span><span class=\"text\">"+text+"</span><br/>";
		        } 
		        chat.scrollTop = chat.scrollHeight - chat.clientHeight;    
		    },

		    _init: function(){
		        dojo.byId('join').className='';
		        dojo.byId('joined').className='hidden';
		        dojo.byId('username').focus();

		        var element=dojo.byId('username');
		        element.setAttribute("autocomplete","OFF"); 
		        dojo.connect(element, "onkeyup", function(e){   
		            if(e.keyCode == dojo.keys.ENTER){
		                room.join(dojo.byId('username').value);
		                return false;
		            }
		            return true;
			    });

		        element=dojo.byId('joinB');
		        element.onclick = function(){
		            room.join(dojo.byId('username').value);
		            return false;
			    }

		        element=dojo.byId('phrase');
		        element.setAttribute("autocomplete","OFF");
		        dojo.connect(element, "onkeyup", function(e){   
		            if(e.keyCode == dojo.keys.ENTER){
		                room.chat(dojo.byId('phrase').value);
		                dojo.byId('phrase').value='';
		                return false;
		            }
		            return true;
			    });

		        element=dojo.byId('sendB');
		        element.onclick = function(){
		        	room.chat(dojo.byId('phrase').value);
		        	dojo.byId('phrase').value='';
				}

		        element=dojo.byId('leaveB');
		        element.onclick = function(){
		        	room.leave();
				}
		    } 
		};

		dojo.addOnLoad(function(){
		   dojox.cometd.init("http://localhost:3000/cometd");
		   dojo.connect(dojo.byId("counter_button"), "onclick", counter, "start_stop");
		   dojo.connect(dojo.byId("rpc_button"), "onclick", rpc, "invoke");
		});
		dojo.addOnLoad(room, "_init");
		
		dojo.addOnUnload(room,"leave");	
		dojo.addOnUnload(function(){
		   dojox.cometd.disconnect();
		});	
					
	</script>
</head>
<body>
	<h2>ErlyComet simple demos (<a href="http://dojotoolkit.org">dojo Javascript toolkit</a>)</h2>

	<h3>1. Epoch-time-mod-1000 counter</h3>
	<div class="container">
   		<div id="counter_output" class="output" style="height:3ex"></div>
   		<div class="input">
    		<div>
       			Server side implemented counter:&nbsp;
				<button id="counter_button">subscribe</button>
     		</div>
    	</div>
   	</div>

	<h3>2. RPC - delayed echo</h3>
	<div class="container">
   		<div id="rpc_output" class="output" style="height:3ex"></div>
   		<div class="input">
    		<div>
    			Value:
				<input id="rpc_text" type="text">&nbsp;&nbsp;
				Delay (in sec):
				<input id="rpc_delay" type="text">&nbsp;
                <input id="rpc_button" class="button" type="submit" name="join" value="Invoke">
    		</div>
    	</div>
   	</div>		

	<h3>3. Simple Chat (code from: http://cometd.com/ SVN repository)</h3>	
 	<div class="container">
		<div id="chat" class="output" style="height:14ex"></div>
		<div class="input">
			<div id="join" >
   				Username:&nbsp;<input id="username" type="text"><input id="joinB" class="button" type="submit" name="join" value="Join"/>
  			</div>
   			<div id="joined" class="hidden">
   				Chat:&nbsp;<input id="phrase" type="text">
   				<input id="sendB" class="button" type="submit" name="join" value="Send">
   				<input id="leaveB" class="button" type="submit" name="join" value="Leave">
   			</div>
   		</div>
	</div>
	
	<p>
		For a demo with the jquery Comet library <a href="/jquery">click here</a> or
		try <a href="/sketch.html">collaborative drawing</a>
	</p>	
</body>


